import Icon from '@/components/Icon';
import { useAppSelector } from '@/store';
import {
  addUserChannelAction,
  getAllchannelAction,
  getUserChannelAction,
} from '@/store/action/channel';
import { Popup, Tabs, Toast } from 'antd-mobile';
import React, { useEffect, useState } from 'react';
import { useDispatch } from 'react-redux';
import styles from './index.module.scss';
import lodash from 'lodash';
import classNames from 'classnames';
import { delUserChannelAction } from '@/store/action/channel';
import { ChannelType } from '@/store/reducer/channel';
import { useHistory } from 'react-router-dom';
import { saveChannelIdAction } from '@/store/action/article';

export default function Channel() {
  const dispatch = useDispatch();
  const [popupShow, setPopupShow] = useState(false);
  const [edit, setEdit] = useState(false);
  const history = useHistory();
  useEffect(() => {
    //获取频道 有token获取用户的，无token用本地或者请求所有
    dispatch(getUserChannelAction());
    dispatch(getAllchannelAction());
  }, [dispatch]);

  const { userChannelList } = useAppSelector((state) => state.channel);
  const { allChannelList } = useAppSelector((state) => state.channel);
  const restChannelList = lodash.differenceBy(
    allChannelList,
    userChannelList,
    'id'
  );
  //用户删除单个频道
  const handleDel = (data: ChannelType) => {
    if (userChannelList.length <= 5)
      return Toast.show({ content: '至少保留5个', duration: 1000 });
    if (data.id === 0)
      return Toast.show({ content: '推荐不可删除', duration: 1000 });
    dispatch(delUserChannelAction(data));
    Toast.show({ content: '删除成功', duration: 1000 });
  };
  //用户添加频道
  const handleAdd = (data: ChannelType) => {
    dispatch(addUserChannelAction({ channels: [data] }));
    Toast.show({ content: '添加成功', duration: 1000 });
  };
  const { channelId } = useAppSelector((state) => state.article);
  // console.log(channelId);

  return (
    <div className={styles.root}>
      <Tabs
        defaultActiveKey="0"
        className="tabs"
        activeKey={channelId}
        onChange={(key) => dispatch(saveChannelIdAction(key))}
      >
        {userChannelList.map((item) => (
          <Tabs.Tab title={item.name} key={item.id}></Tabs.Tab>
        ))}
      </Tabs>
      <div className="right">
        <Icon type="iconbtn_search" onClick={() => history.push('/search')} />
        <Icon type="iconbtn_channel" onClick={() => setPopupShow(true)} />
      </div>

      <Popup
        visible={popupShow}
        position="left"
        bodyClassName={styles.channelPopup}
      >
        {/* 顶部栏：带关闭按钮 */}
        <div className="channel-header">
          <Icon
            type="iconbtn_channel_close"
            onClick={() => setPopupShow(false)}
          />
        </div>

        {/* 频道列表 */}
        <div className="channel-content">
          {/* 当前已选择的频道列表 */}
          <div className={classNames('channel-item', edit ? 'edit' : '')}>
            <div className="channel-item-header">
              <span className="channel-item-title">我的频道</span>
              <span className="channel-item-title-extra">点击删除频道</span>
              <span
                className="channel-item-edit"
                onClick={() => setEdit(!edit)}
              >
                {edit ? '完成' : '编辑'}
              </span>
            </div>

            <div className="channel-list">
              {!!userChannelList.length &&
                userChannelList.map((item) => (
                  <span className="channel-list-item" key={item.id}>
                    {item.name}
                    <Icon
                      type="iconbtn_tag_close"
                      onClick={() => handleDel(item)}
                    />
                  </span>
                ))}
            </div>
          </div>

          {/* 推荐的频道列表 */}
          <div className="channel-item">
            <div className="channel-item-header">
              <span className="channel-item-title">频道推荐</span>
              <span className="channel-item-title-extra">点击添加频道</span>
            </div>
            <div className="channel-list">
              {!!restChannelList.length &&
                restChannelList.map((item) => (
                  <span
                    className="channel-list-item"
                    key={item.id}
                    onClick={() => handleAdd(item)}
                  >
                    + {item.name}
                  </span>
                ))}
            </div>
          </div>
        </div>
      </Popup>
    </div>
  );
}
